<template>
  <div class="list">
    <div class="head">
      <div class="id">开始时间</div>
      <div class="username">结束时间</div>
      <div class="nickname">活动内容</div>
      <div class="createdate">参加人数</div>
      <div class="handle">操作</div>
    </div>
    <div v-for="(item, index) in actList" :key="index" class="user">
      <div class="up">
        <div class="info">
          <div class="id">{{ item.startTime }}</div>
          <div class="username">{{ item.endTime }}</div>
          <div class="nickname">{{ item.resume }}</div>
          <div class="createdate">{{ item.number }}</div>
          <el-button type="danger" class="handle" @click="deleteClick(item)"
            >删除</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { deleteActivity } from "@/api/worker";
import { getActivity } from "@/api/activity";
export default {
  data() {
    return {
      actList: {},
    };
  },
  mounted() {
    this.activityList();
  },
  methods: {
    // 获得活动列表
    activityList() {
      getActivity().then((res) => {
        res.msg = "活动列表";
        for (var i = 0; i < res.data.length; i++) {
          res.data[i].createTime = this.formatDate(res.data[i].createTime);
          res.data[i].startTime = this.formatDate(res.data[i].startTime);
          res.data[i].endTime = this.formatDate(res.data[i].endTime);
        }
        console.log(res);
        this.actList = res.data;
      });
    },

    // 删除按钮
    deleteClick(item) {
      deleteActivity(item.id).then((res) => {
        // console.log(res)
        this.$message.success("删除成功！");
      });
      setTimeout(() => {
        this.activityList();
      }, 100);
    },


    // 日期格式化 年月日
    formatDate(dateint) {
      var date = new Date(parseInt(dateint));
      var str =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      return str;
    },
  },
};
</script>

<style lang='scss' scoped>
.list {
  width: 1100px;
  height: 850px;
  background-color: #fff;
  margin: auto;
  position: relative;
  top: 25px;
  overflow-x: hidden;
  overflow-y: auto;
  .avatar {
    width: 300px;
  }
  .head {
    position: relative;
    height: 50px;
    border-bottom: 1px solid #000;
    div {
      font-size: 20px;
      float: left;
      color: rgb(85, 85, 85);
      font-weight: bold;
      padding-top: 15px;
    }
    .id {
      position: absolute;
      left: 50px;
      width: 80px;
    }
    .username {
      position: absolute;
      left: 200px;
    }
    .nickname {
      position: absolute;
      left: 350px;
    }
    .createdate {
      position: absolute;
      left: 680px;
    }
    .handle {
      position: absolute;
      left: 850px;
    }
  }
  .user {
    width: 1100px;
    height: auto;
    float: left;
    // border-bottom: 1px solid #000;

    .up {
      width: 1100px;
      height: 50px;
      border-bottom: 1px solid #000;
      .icon {
        cursor: pointer;
        float: left;
        padding: 13px 15px;
      }
      .info {
        position: relative;
        div {
          float: left;
          padding: 12px 0;
        }
        .id {
          position: absolute;
          left: 75px;
          width: 80px;
        }
        .username {
          position: absolute;
          left: 200px;
        }
        .nickname {
          position: absolute;
          left: 350px;
          width: 270px;
          line-height: 40px;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        .createdate {
          position: absolute;
          left: 720px;
        }
        .handle {
          position: absolute;
          left: 850px;
          top: 5px;
        }
      }
    }
    .down {
      width: 1100px;
      height: 225px;
      border-bottom: 1px solid #000;
      position: relative;
      .left {
        position: absolute;
        left: 50px;
        float: left;
        padding: 10px 0;
        div {
          padding: 10px 0;
        }
        .password {
          span {
            cursor: pointer;
            color: #409eff;
          }
        }
        .avatar {
          span {
            cursor: pointer;
            color: #409eff;
          }
        }
      }
      .right {
        float: left;
        position: absolute;
        left: 500px;
        padding: 10px 0;
        div {
          padding: 10px 0;
        }
      }
    }
  }
}
</style>